<template>
    <div class="tech-table-order-list">
        <div class="order-list-title" v-if="tableName">
            <template v-if="orderList.length > 1">
                <span class="bold">{{tableName}}</span> 桌存在多笔订单，请选择订单
            </template>
            <template>
                <span class="bold">{{tableName}}</span> 桌已存在订单
            </template>
        </div>
        <div class="order-list">
            <div class="order-item" v-for="(item, i) in orderList" :key="i">
                <div class="order-item-name">
                    <div class="name">订单-{{orderStr(item.order_number)}}</div>
                    <Button class="tech-btn" type="danger" round size="mini" @click="gotoDetail(item.order_number)">进入订单</Button>
                </div>
                <div class="order-item-detail">
                    <div class="memo">{{item.memo}}</div>
                    <div class="platform">来源：{{orderPlatform(item.platform_id)}}</div>
                </div>
            </div>
        </div>
        <div v-if="orderList.length > 0" class="clear-table" @click="clearTableAction">重新点单</div>
    </div>
</template>

<script>
import { Button } from 'vant';
import { clearTable } from '@store/action';
import { basePath } from '@router/config';
import { goToRedirect } from '@biztools/redirect';
import { PLATFORM_TYPE_TEXT } from '@constants/platformTypes';
import { repalceTo } from '@common/utils';
export default {
    name: 'TableOrderList',
    components: {
        Button,
    },
    props: {
        isNeedAuthor: {
            type: Boolean,
            default: true,
        },
        tableName: String,
        orderList: {
            type: Array,
            default(){
                return [];
            },
        },
        appId: String,
        comId: String,
        storeId: [String, Number],
        tableId: [String, Number],
    },
    computed: {
        orderPlatform() {
            return (platform) => {
                return PLATFORM_TYPE_TEXT[platform];
            };
        },
        orderStr() {
            return (orderNumber) => {
                const len = orderNumber.length;
                return orderNumber.substr(len - 4, len - 1);
            };
        },
    },
    methods: {
        gotoOrder(appId, comId, canOrder) {
            const { isNeedAuthor } = this.$props;
            // 根据返回，结合平台，生成相应的跳转链接
            const url = `${window.location.origin}${basePath}/store/menu?type=ineat&canOrder=${canOrder}`;
            // 跳转授权页面，生成 code | auth_code
            // 执行跳转操作
            if (isNeedAuthor) {
                goToRedirect(appId, url, comId);
            } else {
                repalceTo('store/menu', { type: 'ineat' });
            }
        },
        gotoDetail(orderNumber) {
            const { appId, comId, isNeedAuthor } = this.$props;
            const url = `${window.location.origin}${basePath}/order/detail/${orderNumber}`;
            if (isNeedAuthor) {
                goToRedirect(appId, url, comId);
            } else {
                window.location.href = url;
            }
        },
        async clearTableAction() {
            const { appId, comId, storeId, tableId } = this.$props;
            const flag = await clearTable(storeId, tableId);
            if (flag) {
                this.gotoOrder(appId, comId, 1);
            }
        },
    },
};
</script>

<style lang="less">
.tech-table-order-list {
    .order-list-title {
        .font-size-md();
        color: @gray-darker;
        .m(@gap-md);
        .bold {
            font-weight: bold;
            color: @black;
        }
    }
    .order-list {
        .order-item {
            .m(@gap-md);
            .p(@gap-md);
            border-radius: @border-radius;
            box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
            .order-item-name {
                .p-b(@gap);
                .flex();
                align-items: center;
                justify-content: space-between;
                .border-line(@border-color, 0, 0);
                .name {
                    .font-size();
                    color: @gray-444;
                }
                .tech-btn {
                    width: 80px;
                    height: 24px;
                    line-height: 22px;
                    font-size: 12px;
                }
            }
            .order-item-detail {
                .m-t(@gap);
                .memo {
                    .font-size();
                    color: @gray-darker;
                }
                .platform {
                    .m-t(@gap);
                    .font-size-sm();
                    color: @gray-dark;
                }
            }
        }
    }
    .clear-table {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 48px;
        background: rgba(255,255,255,1);
        box-shadow: 0px -2px 16px 0px rgba(0,0,0,0.11);
        line-height: 48px;
        text-align: center;
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        color: #333;
    }
}
</style>
